<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath(); 
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<jsp:useBean id="user" class="com.hebxy.ssm.entity.User" scope="request"></jsp:useBean>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="<%=basePath %>static/js/jquery-2.1.0.js"></script>
<script>
	function checkStrength(password){
		const strength = calculateStrength(password);
		updateStrengthUI(strength);
	}
	
	function calculateStrength(password){
		const hasDigit = /\d/.test(password);
		const hasLower = /[a-z]/.test(password);
        const hasUpper = /[A-Z]/.test(password);
        const hasSpecial = /[^a-zA-Z0-9]/.test(password);
        const length = password.length;
        
        if (length >= 12 && hasDigit && hasLower && hasUpper && hasSpecial) return 'STRONG';
        else if (length >= 8 && ((hasDigit && (hasLower || hasUpper)) || hasSpecial)) return 'MEDIUM';
        else return 'WEAK';
	}
	
	function updateStrengthUI(strength) {
        const img = document.getElementById('strengthImg');
        const text = document.getElementById('strengthText');
        
        switch(strength) {
            case 'STRONG':
                img.src = '${pageContext.request.contextPath}/static/image/strength-strong.png';
                text.textContent = '强';
                text.style.color = 'green';
                break;
            case 'MEDIUM':
                img.src = '${pageContext.request.contextPath}/static/image/strength-medium.png';
                text.textContent = '中';
                text.style.color = 'orange';
                break;
            default:
                img.src = '${pageContext.request.contextPath}/static/image/strength-weak.png';
                text.textContent = '弱';
                text.style.color = 'red';
        }
    }
</script>
<title>用户注册 - 电信业务系统</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;500;700&display=swap');
    body {
        font-family: 'Noto Sans SC', sans-serif;
        background: #f5f7fb;
    }
    .container {
        max-width: 1200px;
        margin: 2rem auto;
        padding: 2rem;
        background: white;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.08);
    }
    .card-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
        margin: 2rem 0;
    }
    .card-item {
        padding: 1.5rem;
        border: 2px solid #e3e8f0;
        border-radius: 12px;
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .card-item:hover {
        border-color: #4f46e5;
        background: #f8faff;
    }
    .plan-table {
        border-collapse: separate;
        border-spacing: 0 8px;
    }
    .plan-table tr {
        background: white;
        transition: all 0.2s ease;
    }
    .plan-table tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(79,70,229,0.1);
    }
    .form-group {
        position: relative;
        margin: 1.5rem 0;
    }
    .form-icon {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #64748b;
    }
    .strength-indicator {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    .gradient-btn {
        background: linear-gradient(135deg, #4f46e5, #8b5cf6);
        color: white;
        padding: 0.8rem 2rem;
        border-radius: 8px;
        border: none;
        transition: transform 0.2s;
    }
    .gradient-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(79,70,229,0.3);
    }
</style>
</head>
<body>
<div class="container">
    <h1 style="color: #1e293b; border-left: 4px solid #4f46e5; padding-left: 1rem;">
        <i class="fas fa-user-plus"></i> 用户添加
    </h1>

    <form:form action="${pageContext.request.contextPath }/admin/addUser" method="POST" modelAttribute="user">
        <!-- 手机卡号选择 -->
        <section>
            <h3 style="color: #475569; margin: 2rem 0 1rem;">
                <i class="fas fa-sim-card"></i> 选择手机卡号
            </h3>
            <div class="card-grid">
                <c:forEach var="card_number" items="${card_numbers }">
                    <div class="card-item">
                        <label style="display: flex; align-items: center; gap: 1rem;">
                            <input type="radio" name="card_number" value="${card_number }" 
                                   style="accent-color: #4f46e5; width: 18px; height: 18px;">
                            <span style="font-weight: 500; color: #1e293b;">${card_number }</span>
                        </label>
                    </div>
                </c:forEach>
            </div>
        </section>
        ${card_number}

        <!-- 套餐选择 -->
        <section>
            <h3 style="color: #475569; margin: 2rem 0 1rem;">
                <i class="fas fa-box-open"></i> 选择资费套餐
            </h3>
            <table class="plan-table" style="width: 100%;">
                <thead>
                    <tr style="background: linear-gradient(135deg, #4f46e5, #8b5cf6); color: white;">
                        <th style="padding: 1rem; border-radius: 8px 0 0 8px;"></th>
                        <th style="padding: 1rem;">套餐名称</th>
                        <th style="padding: 1rem;">通话时长</th>
                        <th style="padding: 1rem;">上网流量</th>
                        <th style="padding: 1rem;">短信条数</th>
                        <th style="padding: 1rem; border-radius: 0 8px 8px 0;">月费</th>
                    </tr>
                </thead>
                <tbody>
                    <c:forEach var="plan" items="${plans }">
                    <tr style="cursor: pointer;">
                        <td style="padding: 1rem; text-align: center;">
                            <input type="radio" name="plan_id" value="${plan.id }" 
                                   style="accent-color: #4f46e5;">
                        </td>
                        <td style="padding: 1rem; font-weight: 500;">${plan.plan_name }</td>
                        <td style="padding: 1rem;">${plan.call_time }分钟</td>
                        <td style="padding: 1rem;">${plan.data_usage }MB</td>
                        <td style="padding: 1rem;">${plan.sms_count }条</td>
                        <td style="padding: 1rem; color: #4f46e5; font-weight: 700;">¥${plan.monthly_fee }</td>
                    </tr>   
                    </c:forEach>
                    <tr style="cursor: pointer;">
                    	<td>
                        </td>
                        <td style="padding: 1rem; font-weight: 500;">${taocan.plan_name }</td>
                        <td style="padding: 1rem;">${taocan.call_time }分钟</td>
                        <td style="padding: 1rem;">${taocan.data_usage }MB</td>
                        <td style="padding: 1rem;">${taocan.sms_count }条</td>
                        <td style="padding: 1rem; color: #4f46e5; font-weight: 700;">¥${taocan.monthly_fee }</td>
                    </tr>
                </tbody>
            </table>
        </section>
        

        <!-- 用户信息 -->
        <section style="margin-top: 3rem;">
            <h3 style="color: #475569; margin-bottom: 2rem;">
                <i class="fas fa-user-cog"></i> 用户信息
            </h3>
            
            <div class="form-group">
                <div style="position: relative;">
                    <i class="fas fa-user form-icon"></i>
                    <form:input path="username" 
                              placeholder="请输入用户名"
                              style="width: 90%; padding: 0.8rem 2.5rem; border: 2px solid #e3e8f0; border-radius: 8px;"/>
                </div>
                <form:errors path="username" class="error" style="color: #ef4444; font-size: 0.875rem; margin-top: 0.5rem;"/>
            </div>

            <div class="form-group">
                <div style="position: relative;">
                    <i class="fas fa-lock form-icon"></i>
                    <form:input path="password" 
                              placeholder="请输入密码"
                              onkeyup="checkStrength(this.value)"
                              style="width: 80%; padding: 0.8rem 2.5rem; border: 2px solid #e3e8f0; border-radius: 8px;"/>
                </div>
                <form:errors path="password" class="error" style="color: #ef4444; font-size: 0.875rem; margin-top: 0.5rem;"/>
                <div class="strength-indicator">
                    <img id="strengthImg" src="${pageContext.request.contextPath}/static/image/strength-default.png" 
                         style="width: 100px; height: 100px;">
                    <span id="strengthText" style="font-size: 0.875rem;">密码强度检测</span>
                </div>
            </div>

            <div class="form-group">
                <div style="position: relative;">
                    <i class="fas fa-wallet form-icon"></i>
                    <input name="prepaid_amount" value="${user.prepaid_amount }"
                           placeholder="预存金额"
                           style="width: 100%; padding: 0.8rem 2.5rem; border: 2px solid #e3e8f0; border-radius: 8px;">
                </div>
                <div style="color: #ef4444; font-size: 0.875rem; margin-top: 0.5rem;">${msg2 }</div>
            </div>
        </section>

        <!-- 操作按钮 -->
        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <button type="submit" class="gradient-btn" onclick="return confirm('确认添加吗？')">
                <i class="fas fa-check"></i> 提交申请
            </button>
            <button type="button" onclick="history.go(-1)" 
                    style="background: none; border: 2px solid #cbd5e1; padding: 0.8rem 2rem; border-radius: 8px;">
                <i class="fas fa-arrow-left"></i> 返回
                
            </button>
        </div>
    </form:form>

    <!-- 系统消息 -->
    <c:if test="${not empty msg}">
        <div style="margin-top: 2rem; padding: 1rem; background: #f1f5f9; border-radius: 8px;">
            ${msg}
        </div>
    </c:if>
    <c:if test="${not empty msg1}">
                <a href="${pageContext.request.contextPath }/admin/role" 
                   style="color: #4f46e5; text-decoration: none; margin-left: 1rem;">
                   ${msg1 }
                </a>
            </c:if>
</div>
</body>
</html>
